<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('退款')"/>
    <style>
        #content {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            gap: 30px;
            padding: 30px;
        }

        .dataItem {
            display: flex;
            flex-direction: column;
            border: thin solid black;
            flex-shrink: 0;
            width: 150px;
            padding: 20px;
            font-size: 2em;

            background-color: #f1f1f1;
            border-radius: 8px;
            box-shadow: 5px 5px 8px 1px rgb(146 152 158 / 58%);
        }
    </style>
</head>
<body class="gray-bg">
<div class="container-div">
    <div class="row">
        <div class="col-sm-12 search-collapse">
            <form id="formId">
                <div class="select-list">
                    <ul>
                        <li>
                            <label>创建时间：</label>
                            <input type="text" class="time-input" placeholder="请选择创建时间" id="startTime"
                                   name="startTime" autocomplete="off"/>
                            -
                            <input type="text" class="time-input" placeholder="请选择创建时间" id="endTime"
                                   name="endTime" autocomplete="off"/>
                        </li>
                        <li>
                            <label>姓名：</label>
                            <input type="text" id="customerName" name="customerName" search="search"/>
                        </li>
                        <li>
                            <label>身份证号：</label>
                            <input type="text" id="idNumber" name="idNumber" search="search"/>
                        </li>
                        <li>
                            <a class="btn btn-primary btn-rounded btn-sm" onclick="getList()"><i
                                    class="fa fa-search"></i>搜索</a>
                            <a class="btn btn-warning btn-rounded btn-sm" onclick="reset()"><i
                                    class="fa fa-refresh"></i>重置</a>
                        </li>
                    </ul>
                </div>
            </form>
        </div>

        <div class="btn-group-sm" id="toolbar" role="group">
        </div>
        <div class="col-sm-12 select-table table-striped">
            <div id="content">
            </div>
        </div>
    </div>
</div>
<th:block th:include="include :: footer"/>
<script th:inline="javascript">
    const prefix = ctx + "system/refund";

    $(function () {
        getList();
    })

    function reset() {
        document.getElementById("formId").reset();
    }

    function getList() {
        $.ajax({
            url: prefix + "/list",
            type: 'post',
            contentType: 'application/x-www-form-urlencoded',
            data: {
                pageSize: 999,
                pageNum: 1,
                isAsc: "asc",
                startTime: $("#startTime").val().trim(),
                endTime: $("#endTime").val().trim(),
                customerName: $("#customerName").val().trim(),
                idNumber: $("#idNumber").val().trim(),
            },
            dataType: 'json',
            success: function (res) {
                if (res.code == 0) {
                    dealList(res.rows, status)
                } else {
                    $.modal.alertError("查询数据出错！" + res.msg);
                }
            },
            error(xhr, status, error) {
                $.modal.alertError(error);
            }
        });
    }

    function dealList(rows, status) {
        let htmlString = "";
        rows.forEach(row => {
            let onclick = `onclick="openDetail(${row.id})"`
            let html = `<div class="dataItem" ${onclick}>
                    <div style="font-weight: bold">${row.customerName}</div>
                    <div style="font-size: 0.8em">${row.customerSex}</div>
                    <div style="font-size: 0.8em">${row.customerAge}岁</div>
<!--                <div style="font-size: 0.8em">${row.daysDetailDesc}</div>-->
                </div>`;
            htmlString += html;
        })
        $("#content").html(htmlString)
    }

    function openDetail(id) {
        $.modal.openOptions({
            url: prefix + "/detail/" + id,
            title: "处方详情",
            width: "1300",
            height: $(window).height() + 20,
            btn: ['关闭'],
            // 第一个按钮的回调方法
            yes: function (index, layero) {
                $.modal.close(index);
            },
            end: function () {
                getList()
            },
        });
    }

</script>
</body>
</html>